import React, { Component } from 'react';
import { Spin, Icon } from 'antd';
import * as event from '../../utils/event/componentEvent';
import './index.less';
const antIcon = <Icon type='loading' style={{ fontSize: 24 }} spin />;
class Loading extends Component {
  constructor(props) {
    super(props);
    this.state = {
      content: '数据加载中...',
      loading: false,
    };
    this.loadingNum = 0;
  }
  componentDidMount() {
    if (this.props.loading) {
      this.setState({
        loading: this.props.loading,
      });
    }

    event.eventEmitter.on(event.SHOW_LOADING, (content) => {
      this.loadingNum++;
      this.setState({ loading: true, content });
    });
    event.eventEmitter.on(event.HIDE_LOADING, () => {
      this.loadingNum--;
      if (this.loadingNum === 0) {
        this.setState({ loading: false });
      }
    });
  }

  componentWillUnmount() {
    console.log('xxx');
    event.eventEmitter.removeAllListeners(event.SHOW_LOADING);
    event.eventEmitter.removeAllListeners(event.HIDE_LOADING);
  }

  render() {
    const { loading } = this.state;
    return (
      <div>
        {loading && (
          <div className='loading'>
            <Spin indicator={antIcon} tip={this.state.content} />
          </div>
        )}
      </div>
    );
  }
}

export default Loading;
